<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <img
            class="mui-media-object mui-pull-left"
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3647170051,871438825&fm=26&gp=0.jpg"
          />
          <div class="mui-media-body">
            <h4>標題</h4>
            <p class="mui-ellipsis">
              <span>發表時間：{{time|dateFormat}}</span>
              <span>點擊1111次</span>
            </p>
          </div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <img
            class="mui-media-object mui-pull-left"
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3647170051,871438825&fm=26&gp=0.jpg"
          />
          <div class="mui-media-body">
            <h4>標題</h4>
            <p class="mui-ellipsis">
              <span>發表時間：{{time|dateFormat}}</span>
              <span>點擊1111次</span>
            </p>
          </div>
        </a>
      </li>
    </ul>

    <ctx-comment :msg="test"></ctx-comment>

    <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

// 導入組件
import Comment from "../compoent/Comment.vue";

export default {
  data() {
    return {
      time: new Date(),
      test: "45666",
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 600,
          h: 400
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 1200,
          h: 900
        }
      ]
    };
  },
  methods: {
    handleClose() {
      console.log("close event");
          Toast({
      message: "退出",
      position: "bottom",
      duration: 500,
    });
    }
  },
  created() {
    Toast({
      message: "進入新聞資訊",
      position: "bottom",
      duration: 2000,
      iconClass: "glyphicon glyphicon-glass"
    });
    console.log(this.$route.params.id);
    
  

  },
  components: {
    "ctx-comment": Comment
  }
};
</script>
<style lang="less" scoped>
.mui-table-view-cell p {
  color: cornflowerblue;
  display: flex;
  justify-content: space-between;
  span:nth-child(1) {
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
